<template>
    <Card class="library">
        <div class="ivu-mb-16">
            <Select   placeholder="请选择公众号" v-model="params.wechatId" @on-change="changeWechat" clearable class="cur" v-width="280">
                <Option v-for="item in wechatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <Tabs v-model="names" :animated="false" @on-click="initial" class="tabs ivu-mb-16">
            <TabPane label="图片" name="name1">
                <myImage ref="myimage" :remark="remark"></myImage>
            </TabPane>
            <TabPane label="音频" name="name2">
                <myaudio ref="myaudio"></myaudio>
            </TabPane>
            <TabPane label="视频" name="name3">
                <myvideo ref="myvideo" :remark="remark"></myvideo>
            </TabPane>
            <TabPane label="回收站" name="name4">
                <returnSourse ref="returnsourse" :remark="remark"></returnSourse>
            </TabPane>

        </Tabs>
    </Card>
</template>
<script>
    import myImage from './components/pimage.vue'
    import myaudio from './components/paudio.vue'
    import myvideo from './components/pvideo.vue'
    import returnSourse from './components/returnsite.vue'
    import { wechatselectConfig } from '@api/public'
    export default {
        components: { myImage, returnSourse, myaudio, myvideo },
        data () {
            return {
                params: { project_id: '' },
                names: 'name1',
                remark: '',
                wechatList: []
            }
        },
        mounted () {
            this.getwechat()
            this.initial('name1')
        },
        methods: {
            getwechat () {
                wechatselectConfig().then(res => {
                    this.wechatList = res
                })
            },
            changeWechat (val) {
                this.$refs.myimage.initial(val);
            },
            initial (name) {
                if (name == 'name1') {
                    this.$refs.myimage.initial(this.params.wechatId);
                } else if (name == 'name2') {
                    this.$refs.myaudio.initial(name);
                } else if (name == 'name3') {
                    this.$refs.myvideo.initial(name);
                } else if (name == 'name4') {
                    this.$refs.returnsourse.initial(name);
                }
            }
        }
    }
</script>
<style >
   @import "../../styles/mystyle.less";
   .library .ivu-tabs-bar{
    border-bottom: none;
    font-weight: bolder;
   }
   .library .ivu-tabs-tab{
    font-size: 18px;
   }
.cur{
    width: 400px;
    position: relative;
}
.cur .ivu-select-selected-value{
    padding-left: 100px !important;
}
.cur .ivu-select-selected-value::before{
    content: '当前公众号:';
    position: absolute;
    z-index: 9;
    top:0;
    left: 10px;
}
</style>
